<template>
  <div class="app-container">
    <!-- 顶部选择和操作按钮 -->
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="断面：">
            <el-select v-model="formInline.id" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.segmentname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间：">
            <el-date-picker
              v-model="formInline.day"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">导出</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 主要内容区域 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <!-- 表格展示监测数据 -->
        <div class="table-container">
          <div class="table-header">
            <h3>{{ formInline.date }}监测数据日报表</h3>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%"
            border
            :span-method="objectSpanMethod"
            :header-cell-style="{ background: '#f5f7fa', color: '#303133' }"
            :cell-style="{ padding: '10px 0' }"
          >
            <el-table-column
              v-for="column in tableOp"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
              align="center"
            >
              <template #default="{ row }">
                <!-- 高亮显示异常值 -->
                <span
                  v-if="isAbnormalValue(row[column.prop], column.prop)"
                  style="color: red"
                  >{{ row[column.prop] }}</span
                >
                <span v-else>{{ row[column.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDmList } from "@/api/dataResources/monitorData/section.js";
import { getAutoStationDailyReport } from "@/api/riverGeneralMange/riverGeneralMange.js";
export default {
  data() {
    return {
      options: [],
      formInline: {
        id: "",
        day: "2025-05-18",
      },
      tableOp: [
        { prop: "time", label: "时间" },
        { prop: "waterTemperature", label: "水温(℃)" },
        { prop: "pH", label: "pH(无量纲)" },
        { prop: "dissolvedOxygen", label: "溶解氧(mg/L)" },
        { prop: "electricalConductivity", label: "电导率(μS/cm)" },
        { prop: "turbidity", label: "浑浊度(NTU)" },
        { prop: "chemicalOxygenDemand", label: "化学需氧量(mg/L)" },
        { prop: "highManganeseIndex", label: "高锰酸盐指数(mg/L)" },
        { prop: "ammoniaNitrogen", label: "氨氮(mg/L)" },
        { prop: "totalPhosphorus", label: "总磷(mg/L)" },
        { prop: "totalPhosphorus", label: "总氮(mg/L)" },
      ],
      tableData: [
        {
          time: "2025-05-18 06:00",
          waterTemperature: "26.0",
          pH: "8.51",
          dissolvedOxygen: "3.37",
          electricalConductivity: "1788.7",
          turbidity: "64.9",
          chemicalOxygenDemand: "",
          highManganeseIndex: "",
          ammoniaNitrogen: "",
          totalPhosphorus: "",
        },
        {
          time: "2025-05-18 07:00",
          waterTemperature: "25.9",
          pH: "8.51",
          dissolvedOxygen: "3.63",
          electricalConductivity: "1790.0",
          turbidity: "67.3",
          chemicalOxygenDemand: "",
          highManganeseIndex: "",
          ammoniaNitrogen: "",
          totalPhosphorus: "",
        },
        {
          time: "2025-05-18 08:00",
          waterTemperature: "25.9",
          pH: "8.51",
          dissolvedOxygen: "5.19",
          electricalConductivity: "1790.2",
          turbidity: "81.8",
          chemicalOxygenDemand: "",
          highManganeseIndex: "6.5",
          ammoniaNitrogen: "0.125",
          totalPhosphorus: "0.171",
        },
        {
          time: "2025-05-18 09:00",
          waterTemperature: "26.0",
          pH: "8.50",
          dissolvedOxygen: "4.61",
          electricalConductivity: "1789.5",
          turbidity: "65.2",
          chemicalOxygenDemand: "",
          highManganeseIndex: "",
          ammoniaNitrogen: "",
          totalPhosphorus: "",
        },
        {
          time: "2025-05-18 10:00",
          waterTemperature: "26.0",
          pH: "8.51",
          dissolvedOxygen: "3.95",
          electricalConductivity: "1788.6",
          turbidity: "65.5",
          chemicalOxygenDemand: "",
          highManganeseIndex: "",
          ammoniaNitrogen: "",
          totalPhosphorus: "",
        },
        {
          time: "2025-05-18 11:00",
          waterTemperature: "26.2",
          pH: "8.51",
          dissolvedOxygen: "4.49",
          electricalConductivity: "1791.0",
          turbidity: "61.6",
          chemicalOxygenDemand: "",
          highManganeseIndex: "",
          ammoniaNitrogen: "",
          totalPhosphorus: "",
        },
        {
          time: "2025-05-18 12:00",
          waterTemperature: "26.4",
          pH: "8.51",
          dissolvedOxygen: "6.63",
          electricalConductivity: "1792.7",
          turbidity: "72.5",
          chemicalOxygenDemand: "",
          highManganeseIndex: "7.2",
          ammoniaNitrogen: "0.092",
          totalPhosphorus: "0.184",
        },
        {
          time: "2025-05-18 13:00",
          waterTemperature: "26.5",
          pH: "8.50",
          dissolvedOxygen: "6.14",
          electricalConductivity: "1793.8",
          turbidity: "61.6",
          chemicalOxygenDemand: "",
          highManganeseIndex: "",
          ammoniaNitrogen: "",
          totalPhosphorus: "",
        },
        {
          time: "2025-05-18 16:00",
          waterTemperature: "26.9",
          pH: "8.49",
          dissolvedOxygen: "7.78",
          electricalConductivity: "1793.8",
          turbidity: "50.7",
          chemicalOxygenDemand: "",
          highManganeseIndex: "6.8",
          ammoniaNitrogen: "0.100",
          totalPhosphorus: "",
        },
        {
          time: "2025-05-18 17:00",
          waterTemperature: "26.3",
          pH: "8.50",
          dissolvedOxygen: "4.61",
          electricalConductivity: "1790.5",
          turbidity: "58.4",
          chemicalOxygenDemand: "",
          highManganeseIndex: "",
          ammoniaNitrogen: "",
          totalPhosphorus: "",
        },
        {
          time: "2025-05-18 20:00",
          waterTemperature: "26.2",
          pH: "8.50",
          dissolvedOxygen: "4.63",
          electricalConductivity: "1793.9",
          turbidity: "59.7",
          chemicalOxygenDemand: "",
          highManganeseIndex: "6.3",
          ammoniaNitrogen: "0.151",
          totalPhosphorus: "",
        },
        {
          time: "2025-05-18 21:00",
          waterTemperature: "26.2",
          pH: "8.50",
          dissolvedOxygen: "4.63",
          electricalConductivity: "1793.9",
          turbidity: "59.7",
          chemicalOxygenDemand: "",
          highManganeseIndex: "",
          ammoniaNitrogen: "",
          totalPhosphorus: "",
        },
      ],
    };
  },
  computed: {
    tableListData() {
      // 处理原始数据并添加统计行
      let arr = [];
      for (let i = 1; i < this.tableOp.length; i++) {
        let key = this.tableOp[i].prop;
        let value = this.tableData.map((item) => item[key]);
        arr.push({ key, value });
      }

      let addRow = [];
      let row1 = { time: "最大值" };
      let row2 = { time: "最小值" };
      let row3 = { time: "均值" };
      let row4 = { time: "各项水质" };
      let row5 = { time: "整体水质", highManganeseIndex: "IV类" };
      let row6 = { time: "超标项", highManganeseIndex: "溶解氧,高锰酸盐指数" };

      for (let item of arr) {
        debugger;
        // 最大值
        row1[item.key] = item.value.length > 0 ? Math.max(...item.value) : "";
        // 最小值
        row2[item.key] = item.value.length > 0 ? Math.min(...item.value) : "";
        // 平均值
        row3[item.key] =
          item.value.length > 0
            ? (
                item.value.reduce((a, b) => Number(a) + Number(b), 0) /
                item.value.length
              ).toFixed(2)
            : "";
        // 各项水质
        row4[item.key] = "I类";
      }

      addRow.push(row1);
      addRow.push(row2);
      addRow.push(row3);
      addRow.push(row4);
      addRow.push(row5);
      addRow.push(row6);
      console.log([...this.tableData, ...addRow]);
      if (this.tableData.length > 0) {
        return [...this.tableData, ...addRow];
      } else {
        return [];
      }
    },
  },
  created() {
    this.getGm();
  },
  methods: {
    //获取断面的列表
    getGm() {
      let query = {
        pageNum: 1,
        pageSize: 1000,
      };
      getDmList(query).then((res) => {
        console.log(">>>ssss", res);
        this.formInline.id = res.rows[0].id;
        this.options = res.rows;
        // 获取表格数据
        this.getList();
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex >= this.tableData.length) {
        if (columnIndex == 1) {
          return [1, this.tableData.length - 2];
        }
        if (columnIndex > 1) {
          return [0, 0];
        }
      }
    },
    onSubmit() {
      console.log("submit!");
      this.getList();
    },
    //获取表格数据
    getList() {
      // 获取表格数据
      let query = {
        id: "15961285-01F8-43B3-9A79-586119318A9D",
        day: "2025-08-23",
      };
      getAutoStationDailyReport(query).then((response) => {
        // getAutoStationDailyReport(this.formInline).then((response) => {
        console.log(">>>table data", response);
        // this.tableData = response.data || [];
        if (response.code == 200) {
          this.tableOp = response.data.tableOp;
          this.tableData = response.data.tableData;
        }
      });
    },
    isAbnormalValue(value, prop) {
      // 定义异常值判断规则
      if (!value || value === "") return false;

      const numValue = parseFloat(value);
      if (isNaN(numValue)) return false;

      // 根据不同参数设置异常阈值
      switch (prop) {
        case "dissolvedOxygen":
          return numValue < 5; // 溶解氧低于5mg/L为异常
        case "highManganeseIndex":
          return numValue > 6; // 高锰酸盐指数高于6mg/L为异常
        case "ammoniaNitrogen":
          return numValue > 0.15; // 氨氮高于0.15mg/L为异常
        default:
          return false;
      }
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.table-header {
  padding: 15px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  text-align: center;
}

.table-header h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.ai-performance {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.ai-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
}

.ai-icon {
  width: 40px;
  height: 40px;
  background-color: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.ai-label {
  font-size: 14px;
  color: white;
  font-weight: bold;
}

.performance-meter {
  width: 100%;
  text-align: center;
}

.meter-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.meter-bar {
  height: 8px;
  background-color: #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.bar-fill {
  height: 100%;
  background-color: #409eff;
  transition: width 0.3s ease;
}

.meter-details {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  color: #666;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.arrow-up {
  color: #409eff;
}

.arrow-down {
  color: #f56c6c;
}

.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-table th {
  font-weight: 500;
  color: #303133;
}
</style>
